<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>yukari world</title>
<#include "/lib/base_source.ftl">
<style type="text/css">
</style>
</head>
<body>
<div class='whole-container'>
<#include "/lib/header.ftl">
    <div>
        <ul class="breadcrumb">
        	<li>歌曲管理</li><span class="divider">/</span>
            <li>会唱歌曲列表</li>
        </ul>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="container span12">
            <#include "/lib/alert.ftl">

                <div class='main-content'>
                    <div class="well form-inline">
                        <div class='main-action'>
                        	<div style="color:red;"><b>歌曲歌单由窝窝整理提供</b></div>
                        	<form id="searchForm" action="" method="post">
                        		搜索:&nbsp;<input type="text" id="query" name="query" style="width:150px"/>
		                        <select name="type" id="type" onchange="searchAjax()">
		                        	<option value="">全部</option>
		                        	<option value="动画/游戏">动画/游戏</option>
		                        	<option value="中文">中文</option>
		                        	<option value="V家">V家</option>
		                        	<option value="缘创">缘创</option>
		                        	<option value="英文">英文</option>
		                        	<option value="其它">其它</option>
		                        	<option value="广告">广告</option>
		                        	<option value="未分类">未分类</option>
		                        </select>
		                        <input type="hidden" id="orderType" name="orderType" value="type"/>
		                        <input type="hidden" id="desc" name="desc" value="false"/>
                        	</form>
                        	<a class="btn btn-primary btn-sm" href="${rc.contextPath}/admin/music/add">添加歌曲</a>
                        </div>
                    </div>
                    
                    <div class="table-content">
                    <#-- table -->
                        <table class="table table-striped table-bordered table-condensed" id="itemTable" style="font-size:12px;word-break:break-all;word-wrap:break-word;">
                            <thead>
                            <tr >
                                <th style="width:25%;" onClick="order('name')">歌名</th>
                                <th style="width:15%;">中文名</th>
                                <th style="width:10%;" onClick="order('type')">歌曲分类</th>
                                <th style="width:10%;" onClick="order('last_sing_date')">最近时间</th>
                                <th style="width:20%;">备注</th>
                                <th style="width:20%;"></th>
                            </tr>
                            </thead>
                            <tbody id="musicList">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
    	searchAjax();
    });
    
    function order(col){
    	var orderType = $("#orderType");
		var desc = $("#desc");
    	if (orderType.val() == col){
    		if (desc.val() == 'false'){
    			desc.val('true');
    		} else {
    			desc.val('false');
    		}
    	} else {
    		orderType.val(col);
    		desc.val('false');
    	}
    	searchAjax();
    }
    
    
    var key = $("#query").val();
	function search() {
		var query = $("#query").val();
		if (query != key){
			key = query;
			searchAjax();
		}
	} 
	
	function searchAjax(){
		$.ajax({
			url : "${rc.contextPath}/admin/music/search",
	    	dataType : "json",
	    	data :  $("#searchForm").serialize(),
	    	type:'post',
	    	success:function(json){
	    		var data = json.data;
				$("#musicList").html("");
	    		for (var i=0;i<data.length;i++){
	    			showMusic(data[i]);
	    		}
	    	}
		});
	}
	
	function showMusic(data){
		var tr = $('<tr></tr>')
		var td1 = $('<td>'+data.name+'</td>');
		var td2 = $('<td>'+data.nameCn+'</td>');
		var td3 = $('<td>'+data.type+'</td>');
		var td4 = $('<td>'+formatDate(data.lastSingTime)+'</td>');
		var td5 = $('<td>'+data.description+'</td>');
		var td6 = $('<td></td>');
		if (data.content != ''){
			td6.append($('<a class="btn btn-success btn-sm" href="${rc.contextPath}/admin/music/lyrics?id='+data.id+'">查看歌词</a>'))
		}
		td6.append($('<a class="btn btn-primary btn-sm" href="${rc.contextPath}/admin/music/edit?id='+data.id+'">编辑</a>'))
		tr.append(td1).append(td2).append(td3).append(td4).append(td5).append(td6);
		$("#musicList").append(tr);
	}
	
	function  formatDate(now)   {     
		if (now == null){
			return "";
		} 
		var now= new Date(now);     
		var year=now.getFullYear();     
		var month=now.getMonth()+1;     
		var date=now.getDate();     
		return  year+"-"+buling(month)+"-"+buling(date); 
	}
	function buling(a){
		if (a < 10){
			return "0"+a;
		} else {
			return a;
		}
	}
	
	

    setInterval("search()",500);
</script>
</body>
</html>